<template>
  <div class="statistics-container">
    <!-- 统计卡片 -->
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item, index) in statisticsCards" :key="index">
        <el-card shadow="hover" class="statistics-card">
          <div class="statistics-item">
            <el-icon :size="40" :class="item.color">
              <component :is="item.icon" />
            </el-icon>
            <div class="statistics-info">
              <div class="statistics-value">{{ item.value }}</div>
              <div class="statistics-label">{{ item.label }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="chart-row">
      <!-- 月度培训人数趋势 -->
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <div class="card-header">
              <span>月度培训人数趋势</span>
              <el-radio-group v-model="trainingTrendType" size="small">
                <el-radio-button label="month">月度</el-radio-button>
                <el-radio-button label="quarter">季度</el-radio-button>
                <el-radio-button label="year">年度</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="chart" ref="trainingTrendChartRef"></div>
        </el-card>
      </el-col>

      <!-- 考试通过率分析 -->
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <div class="card-header">
              <span>考试通过率分析</span>
              <el-select v-model="passRateSubject" size="small" style="width: 120px">
                <el-option label="全部科目" value="all" />
                <el-option label="科目一" value="科目一" />
                <el-option label="科目二" value="科目二" />
                <el-option label="科目三" value="科目三" />
                <el-option label="科目四" value="科目四" />
              </el-select>
            </div>
          </template>
          <div class="chart" ref="passRateChartRef"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <!-- 教练工作量统计 -->
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <div class="card-header">
              <span>教练工作量统计</span>
              <el-date-picker
                v-model="workloadDate"
                type="month"
                placeholder="选择月份"
                size="small"
                style="width: 120px"
              />
            </div>
          </template>
          <div class="chart" ref="workloadChartRef"></div>
        </el-card>
      </el-col>

      <!-- 收入统计 -->
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <div class="card-header">
              <span>收入统计</span>
              <el-radio-group v-model="incomeType" size="small">
                <el-radio-button label="daily">日收入</el-radio-button>
                <el-radio-button label="monthly">月收入</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="chart" ref="incomeChartRef"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 排名统计表格 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>教练排名统计</span>
              <el-radio-group v-model="rankingType" size="small">
                <el-radio-button label="students">学员数量</el-radio-button>
                <el-radio-button label="passRate">通过率</el-radio-button>
                <el-radio-button label="satisfaction">满意度</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <el-table :data="rankingData" style="width: 100%">
            <el-table-column type="index" label="排名" width="80" />
            <el-table-column prop="name" label="教练姓名" />
            <el-table-column prop="value" :label="getRankingLabel">
              <template #default="{ row }">
                <span>{{ formatRankingValue(row.value) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="trend" label="趋势" width="120">
              <template #default="{ row }">
                <el-tag :type="row.trend === 'up' ? 'success' : 'danger'" size="small">
                  {{ row.trend === 'up' ? '上升' : '下降' }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import * as echarts from 'echarts'
import {
  User,
  Medal,
  Money,
  DataLine
} from '@element-plus/icons-vue'

// 统计卡片数据
const statisticsCards = ref([
  { label: '总学员数', value: '1,234', icon: 'User', color: 'primary' },
  { label: '考试通过率', value: '85%', icon: 'Medal', color: 'success' },
  { label: '月收入', value: '￥123,456', icon: 'Money', color: 'warning' },
  { label: '培训课时', value: '2,345', icon: 'DataLine', color: 'danger' }
])

// 图表相关
const trainingTrendChartRef = ref(null)
const passRateChartRef = ref(null)
const workloadChartRef = ref(null)
const incomeChartRef = ref(null)

// 筛选条件
const trainingTrendType = ref('month')
const passRateSubject = ref('all')
const workloadDate = ref(new Date())
const incomeType = ref('monthly')
const rankingType = ref('students')

// 排名数据
const rankingData = ref([
  { name: '李教练', value: 56, trend: 'up' },
  { name: '王教练', value: 48, trend: 'up' },
  { name: '张教练', value: 45, trend: 'down' },
  { name: '赵教练', value: 42, trend: 'up' },
  { name: '刘教练', value: 38, trend: 'down' }
])

// 排名标签
const getRankingLabel = computed(() => {
  const labelMap = {
    students: '学员数量',
    passRate: '通过率',
    satisfaction: '满意度'
  }
  return labelMap[rankingType.value]
})

// 格式化排名值
const formatRankingValue = (value) => {
  if (rankingType.value === 'passRate') {
    return value + '%'
  } else if (rankingType.value === 'satisfaction') {
    return value.toFixed(1) + '分'
  }
  return value
}

onMounted(() => {
  // 初始化月度培训人数趋势图
  const trainingTrendChart = echarts.init(trainingTrendChartRef.value)
  trainingTrendChart.setOption({
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      name: '培训人数',
      type: 'line',
      smooth: true,
      data: [150, 180, 220, 270, 320, 350],
      areaStyle: {}
    }]
  })

  // 初始化考试通过率分析图
  const passRateChart = echarts.init(passRateChartRef.value)
  passRateChart.setOption({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [{
      name: '通过率',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '20',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 85, name: '已通过' },
        { value: 15, name: '未通过' }
      ]
    }]
  })

  // 初始化教练工作量统计图
  const workloadChart = echarts.init(workloadChartRef.value)
  workloadChart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      type: 'category',
      data: ['李教练', '王教练', '张教练', '赵教练', '刘教练']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      name: '培训课时',
      type: 'bar',
      data: [120, 100, 90, 85, 70]
    }]
  })

  // 初始化收入统计图
  const incomeChart = echarts.init(incomeChartRef.value)
  incomeChart.setOption({
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} 元'
      }
    },
    series: [{
      name: '收入',
      type: 'line',
      data: [5000, 6000, 8000, 7000, 9000, 12000, 10000],
      markPoint: {
        data: [
          { type: 'max', name: '最大值' },
          { type: 'min', name: '最小值' }
        ]
      }
    }]
  })

  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    trainingTrendChart.resize()
    passRateChart.resize()
    workloadChart.resize()
    incomeChart.resize()
  })
})
</script>

<style scoped>
.statistics-container {
  padding: 20px;
}

.statistics-card {
  margin-bottom: 20px;
}

.statistics-item {
  display: flex;
  align-items: center;
  gap: 20px;
}

.statistics-info {
  display: flex;
  flex-direction: column;
}

.statistics-value {
  font-size: 24px;
  font-weight: bold;
}

.statistics-label {
  font-size: 14px;
  color: #909399;
}

.chart-row {
  margin-bottom: 20px;
}

.chart-card {
  height: 400px;
}

.chart {
  height: 340px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.primary {
  color: #409eff;
}

.success {
  color: #67c23a;
}

.warning {
  color: #e6a23c;
}

.danger {
  color: #f56c6c;
}
</style>